<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Form, Input, message } from 'ant-design-vue';

import { alterUserPasswordApi } from '#/api/core/user';
import { $t } from '#/locales';

const formRef = ref();
const formState = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
});

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  async onConfirm() {
    try {
      await formRef.value?.validate();
      const { userId } = modalApi.getData<{ userId: string }>();

      await alterUserPasswordApi({
        userId,
        ...formState.value,
      });

      message.success($t('user.changePassword.success'));
      modalApi.close();
      return true;
    } catch (error: any) {
      message.error(error.message || $t('user.changePassword.failed'));
      return false;
    }
  },
  onCancel() {
    formRef.value?.resetFields();
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formRef.value?.resetFields();
    }
  },
});

const validateConfirmPassword = async (_rule: any, value: string) => {
  if (value !== formState.value.newPassword) {
    throw new Error($t('user.changePassword.form.confirmPassword.notMatch'));
  }
};
</script>

<template>
  <Modal :title="$t('user.changePassword.title')">
    <Form
      ref="formRef"
      :label-col="{ span: 6 }"
      :model="formState"
      :rules="{
        oldPassword: [
          {
            required: true,
            message: $t('user.changePassword.form.oldPassword.required'),
          },
        ],
        newPassword: [
          {
            required: true,
            message: $t('user.changePassword.form.newPassword.required'),
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: $t('user.changePassword.form.confirmPassword.required'),
          },
          { validator: validateConfirmPassword, trigger: 'change' },
        ],
      }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item
        :label="$t('user.changePassword.form.oldPassword.label')"
        name="oldPassword"
      >
        <Input.Password
          v-model:value="formState.oldPassword"
          :placeholder="$t('user.changePassword.form.oldPassword.placeholder')"
        />
      </Form.Item>
      <Form.Item
        :label="$t('user.changePassword.form.newPassword.label')"
        name="newPassword"
      >
        <Input.Password
          v-model:value="formState.newPassword"
          :placeholder="$t('user.changePassword.form.newPassword.placeholder')"
        />
      </Form.Item>
      <Form.Item
        :label="$t('user.changePassword.form.confirmPassword.label')"
        name="confirmPassword"
      >
        <Input.Password
          v-model:value="formState.confirmPassword"
          :placeholder="
            $t('user.changePassword.form.confirmPassword.placeholder')
          "
        />
      </Form.Item>
    </Form>
  </Modal>
</template>
